<template>
    <div>
        <el-button type="primary" circle class="add" size='mini' @click='addVisible=true;'>＋</el-button>
        <el-table :data="users" style="width: 100%" :highlight-current-row='true'>
            <el-table-column prop="id" label="编号" width="180" align='center'></el-table-column>
            <el-table-column prop="name" label="姓名" width="180" align='center'></el-table-column>
            <el-table-column prop="age" label="年龄" align='center'></el-table-column>
            <el-table-column label="性别" align='center'>
                <div slot-scope='{row}'>
                    {{row.gender==0?'女':'男'}}
                </div>
            </el-table-column>
            <el-table-column prop="phone" label="手机" align='center'></el-table-column>
            <el-table-column label="注册时间" align='center'>
                <div slot-scope='{row}'>
                    {{row.ctime.substr(0,10)+' '+row.ctime.substr(11,8)}}
                </div>
            </el-table-column>
            <el-table-column prop='' label="操作" align='center'>
                <div slot-scope='{row}'>
                    <el-button type="primary" icon="el-icon-edit" circle size='mini' @click='edit(row.id)'></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle size='mini' @click='del(row.id)'></el-button>
                </div>
            </el-table-column>
        </el-table>
        <el-dialog title="编辑" :visible.sync="visible" width="40%">
            <el-form :model="form" status-icon label-position="right" :rules="rules" ref="form">
                <el-form-item label="姓名" label-width="70px" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" label-width="70px" prop="age">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="70px" prop="gender">
                <el-select v-model="form.gender">
                    <el-option label="女" value="0"></el-option>
                    <el-option label="男" value="1"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="电话" label-width="70px" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel('form')">取 消</el-button>
                <el-button type="primary" @click="submitForm('form',form.id)">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="添加" :visible.sync="addVisible" width="40%">
            <el-form :model="addForm" status-icon label-position="right" :rules="rules" ref="addForm">
                <el-form-item label="姓名" label-width="70px" prop="name">
                <el-input v-model="addForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" label-width="70px" prop="age">
                    <el-input v-model="addForm.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="70px" prop="gender">
                <el-select v-model="addForm.gender">
                    <el-option label="女" value="0"></el-option>
                    <el-option label="男" value="1"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="电话" label-width="70px" prop="phone">
                    <el-input v-model="addForm.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel('addForm')">取 消</el-button>
                <el-button type="primary" @click="submit('addForm',addForm.id)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import $ from 'jquery'
    export default{
        data(){
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }
                setTimeout(() => {
                    if (Number(value)!=value) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 1||value>100) {
                            callback(new Error('年龄范围为1到100'));
                        } else {
                            callback();
                        }
                    }
                }, 500);
            };
            var checkPhone=(rule, value, callback) => {
                if (!value) {
                    return callback(new Error('电话不能为空'));
                }
                setTimeout(() => {
                    if (!/^1\d{10}$/.test(value)) {
                        callback(new Error('请输入11位格式正确的电话号码'));
                    }else{
                        callback();
                    }
                }, 500);
            };
            return {
                users:[],
                visible: false,
                addVisible:false,
                form:{},
                addForm:{},
                rules: {
                    name:[
                        {required:true,message:'请输入姓名',trigger:'blur'},
                        {min:3,max:10,message:'长度在 3 到 10 个字符',trigger:'blur'}
                    ],
                    age:[
                        {validator:checkAge,trigger:'blur',required:true}
                    ],
                    gender:[
                        {required:true,message:'请选择性别',trigger:'blur'}
                    ],
                    phone:[
                        {validator:checkPhone,trigger:'blur',required:true}
                    ]
                },
            }
        },
        created(){
            this.getUsers();
        },
        methods:{
            getUsers(){
                $.ajax({
                    url:'http://47.101.143.200:80/users',
                    type:'get',
                    success:(ret)=>{
                        if(ret.error==null){
                            this.users=ret.data;
                        }
                    }
                })
            },
            del(id){
                this.$confirm('确认删除咩?', '反悔提示😕', {
                    confirmButtonText: '是的！我已经想好了',
                    cancelButtonText: '不不！我还是不删了',
                    type: 'warning'
                    }).then(() => {
                        $.ajax({
                        url:`http://47.101.143.200:80/users/${id}`,
                        type:'delete',
                        success:()=>{
                            this.getUsers();
                        }
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功！'
                    });
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '反悔成功！'
                    });          
                });
            },
            edit(id){
                this.visible=true;
                $.ajax({
                    url:`http://47.101.143.200:80/users/${id}`,
                    type:'get',
                    success:(ret)=>{
                        if(ret.error==null){
                            this.form=ret.data;
                            this.form.gender=ret.data.gender==0?"女":"男";
                        }
                    }
                })
            },
            submitForm(form,id) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url:`http://47.101.143.200:80/users/${id}`,
                            type:'put',
                            data:this.form,
                            success:()=>{
                                this.getUsers();
                                if(form=='form'){
                                    this.visible=false;
                                }else{
                                    this.addVisible=false;
                                }
                                this.$refs[form].resetFields();
                                this.$message({
                                    message: '编辑成功',
                                    type: 'success'
                                });
                            }
                        })
                    } else {
                        this.$message.error('错了哦，请正确填写表单内容');
                    }
                });
            },
            cancel(form){
                this.$refs[form].resetFields();
                if(form=='form'){
                    this.visible=false;
                }else{
                    this.addVisible=false;
                }
            },
            submit(form,id) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url:'http://47.101.143.200:80/users',
                            type:'post',
                            data:this.addForm,
                            success:()=>{
                                this.getUsers();
                                if(form=='form'){
                                    this.visible=false;
                                }else{
                                    this.addVisible=false;
                                }
                                this.$refs[form].resetFields();
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                            }
                        })
                    } else {
                        this.$message.error('错了哦，请正确填写表单内容');
                    }
                });
            },
        }
    }
</script>

<style scoped lang='scss'>
    .el-input__inner{
        width:90%;
    }
    .el-select{
        width:100%;
    }
    .el-dialog__headerbtn{
        display:none;
    }
    .add{
        font-size: 20px;
    }
    .el-input--suffix .el-input__inner{
        padding-right: 0;
    }
    .el-input__suffix .el-input__suffix-inner{
        position:absolute;
        right:50px;
    }
</style>